<template>
    <div class="hoem">
         <ChaView>
                <img  @click="per" src="../assets/left.png" alt="">
                <h3>影院</h3>
        </ChaView><br><br>
         <div class="tou">
            <p>{{$route.query.name}} <span>{{$route.query.Rate}}分</span></p>
        </div><br><br><br>
        <div class="cdd">
            <div  class="guo" v-for="(item,index) in list" :key="index">
            <span>{{item.Time}}</span>
            <span><p class="wai">国语{{item.RoomType}}</p><p class="ppp">{{item.Room}}</p></span>
            <span>￥{{item.Price.slice(0,5)}}</span>
            <span><router-link :to="{path:'/xuan',query:{name:name,RoomType:item.RoomType,price:item.Price,id:item.TimeID}}"><button>选择购票</button></router-link></span>
            </div>  
        </div>
    <router-view/>
    </div>
</template>

<style lang="scss">
.hoem{
    width: 100vw;
    height: 100vh;
    background-color: #F3F3F3;
}
.cdd{

    .guo:nth-child(n){
            background-color: #FFFFFF;
    }
    .guo:nth-child(2n){
            background-color: #F3F3F3;
    }
    .guo{
        font-size: 12px;
        text-align: center;
        height: 8vh;
        background-color: #FFFFFF;
        display: flex;
        .wai{
        width: 40px;
         margin-top: -8px;
        margin-left: 30px;
        overflow-x: hidden;
         white-space: nowrap;
        }
        .ppp{
            margin-top: -58px;
            font-weight: 100;
        }
        span{
            margin-top: 2%;
            flex: 1;
            line-height: 8vh;
            button{
                background-color: #EFEFEF;
                color: #2F86B1;
                font-weight: 500;
                width: 80px;
                height: 30px;
                border: none;
                border: 1.5px solid #2F86B1;
                border-radius:5px;
            }
        }
    }
}
</style>
<script>
import ChaView from '@/components/ChaView.vue'
export default {
    data() {
        return {
            list:[],
            id: this.$route.query.id,
            name: this.$route.query.name,
        }
    },
    methods: {
        per() {
        this.$router.go(-1)
      },
    },
    mounted() {
        this.axios.get('Movie/Shows?MovieID=' + this.id).then(res => {
            console.log(res.data);
            this.list = res.data.Movie;
        })
    },
    components: {
    ChaView,
    },
};
</script>

